<template>
  <div class="knowledgebase_box">
    <Option
      @optionChange="optionChangeGet"
      :total="total"
      :isShowEmpty="isShowEmpty"
    >
    </Option>
    <div class="mainbox" v-loading="isLaoding" v-if="!isShowEmpty">
      <div v-for="(item, index) in dataList" :key="index" class="list_item">
        <div class="lis_left">
          <div class="top_icon_title">
            <img
              :src="getFileTypeImg(item.fileName)"
              alt="icon"
              style="width: 20px"
            />
            <div class="title">{{ item.fileTitle }}</div>
          </div>
          <div class="keysbox">
            <span>关键词</span>
            <div
              class="key_item"
              v-for="(key, keyIndex) in item.fileKeyword"
              :key="keyIndex"
            >
              {{ key }}
            </div>
          </div>
          <div class="zhanyao" v-if="item.fileText">
            <span>摘要：</span>
            <span>{{ item.fileText }}</span>
          </div>
          <div class="files">
            <div class="files_item">
              <span
                class="file_name"
                @click.stop="handlerSee(item.file_oss_url, item.fileName)"
                >{{ item.fileName }}</span
              >
              <div class="doingfile">
                <el-tooltip class="top_item" content="预览" placement="top">
                  <img
                    :src="require('@/static/images/see.png')"
                    alt="see"
                    class="seticon_img"
                    @click.stop="handlerSee(item.file_oss_url, item.fileName)"
                  />
                </el-tooltip>
                <!-- <span class="shu">|</span>
                <el-tooltip class="top_item" content="下载" placement="top">
                  <img :src="require('@/static/img/down.png')" alt="down" class="seticon_img" @click.stop="handlerDown(item.file_oss_url, item.fileName)" />
                </el-tooltip> -->
              </div>
            </div>
          </div>
          <div class="peopleinfo">
            <span class="set_span">创建人：{{ item.createByName }}</span>
            <span>创建时间：{{ item.createTime | formatTime }}</span>
            <span>更新人：{{ item.updateByName }}</span>
            <span>更新时间：{{ item.updateTime | formatTime }}</span>
          </div>
        </div>
        <div class="lis_right" @click="handlerDetail(item)">查看基本信息</div>
      </div>
    </div>
    <div class="empty_box" v-else>
      <span>暂无数据</span>
    </div>
    <div class="pagebox">
      <el-pagination
        v-if="total > 0 && !isLaoding"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title=""
      :visible.sync="isShowDetail"
      width="920px"
      :show-close="false"
    >
      <div slot="title" class="dialog-header-box">
        <div class="dialog-header-title">基本信息</div>
        <div class="dialog-header-close" @click="isShowDetail = false">X</div>
      </div>
      <div class="formbox">
        <el-row class="form_row">
          <el-col :span="8">
            <div style="display: flex; margin-bottom: 24px">
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                标题：
              </div>
              <div class="contetn" style="flex: 1">{{ detail.fileTitle }}</div>
            </div>
          </el-col>
          <el-col :span="10">
            <div style="display: flex; margin-bottom: 24px">
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                知识编号：
              </div>
              <div class="contetn" style="flex: 1">{{ detail.id }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="display: flex; margin-bottom: 24px">
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                发布状态：
              </div>
              <div class="contetn" style="flex: 1">
                {{ detail.filePublishStatus === '1' ? '已发布' : '未发布' }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="form_row">
          <el-col :span="8">
            <div style="display: flex; margin-bottom: 24px">
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                作者：
              </div>
              <div class="contetn" style="flex: 1">{{ detail.author }}</div>
            </div>
          </el-col>
          <el-col :span="16">
            <div style="display: flex; margin-bottom: 24px">
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                来源部门：
              </div>
              <div class="contetn" style="flex: 1">{{ detail.departName }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="form_row">
          <el-col :span="24">
            <div style="display: flex; margin-bottom: 24px">
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                文件名称：
              </div>
              <div class="contetn" style="flex: 1">{{ detail.fileName }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="form_row">
          <el-col :span="24">
            <div
              style="display: flex; align-items: center; margin-bottom: 24px"
            >
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                知识分类：
              </div>
              <div class="form_keybox" style="flex: 1">
                <div
                  class="key_item_set"
                  v-for="(key, keyIndex) in detail.fileCategory"
                  :key="keyIndex"
                  :style="keyIndex === 0 ? 'margin-left:0px' : ''"
                >
                  {{ key }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="form_row">
          <el-col :span="24">
            <div
              style="display: flex; align-items: center; margin-bottom: 24px"
            >
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                标签：
              </div>
              <div class="form_keybox" style="flex: 1">
                <div
                  class="key_item_set"
                  v-for="(key, keyIndex) in detail.fileTags"
                  :key="keyIndex"
                  :style="keyIndex === 0 ? 'margin-left:0px' : ''"
                >
                  {{ key }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="form_row">
          <el-col :span="24">
            <div
              style="display: flex; align-items: center; margin-bottom: 24px"
            >
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                关键词：
              </div>
              <div class="form_keybox" style="flex: 1">
                <div
                  class="key_item_set"
                  v-for="(key, keyIndex) in detail.fileKeyword"
                  :key="keyIndex"
                  :style="keyIndex === 0 ? 'margin-left:0px' : ''"
                >
                  {{ key }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="form_row">
          <el-col :span="24">
            <div style="display: flex">
              <div
                class="label"
                style="
                  width: 80px;
                  text-align: right;
                  color: #888;
                  margin-right: 4px;
                "
              >
                摘要：
              </div>
              <div class="contetn" style="flex: 1">
                {{ detail.fileText }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { knowledgeSearchList } from '@/api/index.js'
import Option from './components/option.vue'
export default {
  name: 'Knowledgebase',
  components: {
    Option,
  },
  data() {
    return {
      dataList: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isLaoding: false,
      search: {}, //查询参数

      //查看详情
      detail: {},
      isShowDetail: false,
      isShowEmpty: false,
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(window.localStorage.getItem('LoginInfo'))
    },
  },

  methods: {
    //获取附件类型图片
    getFileTypeImg(fileName) {
      let fileExt = fileName.substr(fileName.lastIndexOf('.')).toLowerCase() // 获得文件后缀名
      let img = ''
      switch (fileExt) {
        case '.doc':
        case '.docx':
          img = require('@/static/images/word.png')
          break
        case '.pdf':
          img = require('@/static/images/pdf.png')
          break
        default:
          img = require('@/static/images/word.png')
      }
      return img
    },

    // options 查询参数
    //flag 是否第一页数据
    optionChangeGet(options, flag = false) {
      if (options) {
        this.search = {
          ...this.search,
          ...options,
        }
        this.initData(flag)
      }
    },

    //分页gaibian
    handleSizeChange(val) {
      this.pageSize = val
      this.initData(true)
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.initData()
    },

    //预览
    handlerSee(url, fileName) {
      let fileExt = fileName.substr(fileName.lastIndexOf('.')).toLowerCase() // 获得文件后缀名
      switch (fileExt) {
        case '.doc':
        case '.docx':
          // window.Application.Documents.Open(url, false, true, false)
          // window.close()
          window.c_methods.openWord(url)
          break
        case '.pdf':
          // wps.OAAssist.ShellExecute(url);
          window.c_methods.openPdf(url)
          break
        default:
          // wps.OAAssist.ShellExecute(url) //使用浏览器打开
          window.open(url,'_blank')
      }
    },
    //下载
    handlerDown(url, fileName) {
      if (!url) return false
      let fileExt = fileName.substr(fileName.lastIndexOf('.')).toLowerCase() // 获得文件后缀名
      switch (fileExt) {
        case '.doc':
        case '.docx':
          window.Application.Documents.OpenFromUrl(url, false, true, false)
          window.close()
          // window.Application.ActiveDocument.SaveAsUrl(url);
          break
        case '.pdf':
          this.DownloadFile(url, fileName, false)
          break
        default:
          wps.OAAssist.ShellExecute(url) //使用浏览器打开
      }
    },
    // WPS下载文件到本地打开（业务系统可根据实际情况进行修改）
    DownloadFile(url, fileName, ReadOnly = false) {
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          //需要业务系统的服务端在传递文件流时，确保请求中的参数有filename
          //落地打开模式下，WPS会将文件下载到本地的临时目录，在关闭后会进行清理
          var path = wps.Env.GetTempPath() + '/' + fileName
          var reader = new FileReader()
          reader.onload = function () {
            wps.FileSystem.Exists(path)
            wps.FileSystem.writeAsBinaryString(path, reader.result)
            //关闭弹框 才能打开pdf
            window.close()
            // 打开本地文件 //文档名可包含路径+ true当文件不是 WPS 格式时，将显示“文件转换”对话框+ReadOnly(只读)
            window.Application.Documents.Open(path, true, ReadOnly, false)
            //删除本地文件
            // isDelete && wps.FileSystem.Remove(path)
          }
          reader.readAsBinaryString(xhr.response)
        }
      }
      xhr.open('GET', url)
      xhr.responseType = 'blob'
      xhr.send()
    },

    //查看基本信息
    handlerDetail(item) {
      this.detail = Object.assign({}, item)
      this.isShowDetail = true
    },
    //初始化数据
    initData(flag) {
      if (flag) {
        this.pageNum = 1
      }
      this.search = {
        ...this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      // console.log('this.search', this.search);
      if (!this.userInfo) {
        this.isShowEmpty = true
        return false
      }
      this.isLaoding = true
      knowledgeSearchList({
        usercode: this.userInfo.usercode,
        compid: this.userInfo.compid,
        params: this.search,
      })
        .then((res) => {
          if (res.code === 200 && res.data.sources && res.data.sources.length) {
            // console.log(res);
            this.dataList = res.data.sources
            this.total = res.data.total
          } else {
            this.dataList = []
            this.total = 0
          }
        })
        .finally(() => {
          this.isLaoding = false
          if (this.dataList.length <= 0) {
            this.isShowEmpty = true
            this.total = 0
          } else {
            this.isShowEmpty = false
          }
        })
        .catch((err) => {
          // window.alert(JSON.stringify(err))
          this.isShowEmpty = true
          this.total = 0

          if (err === '401') {
            // window.alert('登录超时，请重新登录')
            // window.alert(JSON.stringify( window.c_methods.openLoginForm()))
            //移除token
            try {
              window.c_methods.removeToken()
            } catch (error) {
            }
          }
        })
    },
  },
}
</script>
<style>
.el-tooltip__popper {
  font-size: 12px !important;
}
.knowledgebase_box .el-dialog__header {
  padding: 0px 0px !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}
.knowledgebase_box .el-dialog__body {
  padding-top: 20px !important;
}
.knowledgebase_box .el-dialog {
  border-radius: 6px !important;
}
</style>
<style lang="stylus" scoped>
.knowledgebase_box
 width 100%
 padding 16px
 padding-bottom 50px
 box-sizing border-box
 overflow-y auto
 .empty_box
  display flex
  justify-content center
  align-items center
  flex-direction column
  color #888
  height 400px
 .mainbox
  margin 20px 0px
  font-size 14px
  background #fff
  min-height 200px
  .list_item
   z-index 2
   display flex
   align-items center
   box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
   border-radius: 4px;
   padding 10px
   margin-bottom 16px
   &:hover
    box-shadow 0px 0px 6px rgba(0,0,0,0.4)
   .lis_left
    flex 1
    margin-right 20px
    .top_icon_title
     display flex
     align-items center
     font-size 15px
     font-weight bold
     color #262626
     .title
      margin-left 5px
    .keysbox
     display flex
     align-items center
     margin 8px 0px
     color #606266
     .key_item
      box-sizing border-box
      background: rgba(144,147,153,0.1);
      border-radius: 4px;
      border: 1px solid #909399;
      padding 2px 10px
      color: #909399;
      margin-left 16px
      cursor pointer
      &:hover
       border: 1px solid #357DFF;
    .zhanyao
     margin 8px 0px
     color: #606266;
     //height 48px
     line-height 24px
     overflow hidden
     display -webkit-box
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical; //文本排列方向
    .files
     margin-bottom 8px
     .files_item
      display flex
      align-items center
      .file_name
       cursor pointer
       &:hover
        color: #357DFF;
      .doingfile
        box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
        border-radius: 4px;
        border: 1px solid #FFFFFF;
        padding 2px 6px
        margin-left 10px
        box-sizing border-box
        display flex
        align-items center
        cursor pointer
        .seticon_img
        .shu
         margin 0px 3px
         color #357DFF

    .peopleinfo
     color #909399
     span
      font-size 13px
      margin-left 20px
     .set_span
      margin-left 0px
   .lis_right
    background: #357DFF;
    border-radius: 4px;
    border: 1px solid #357DFF;
    color: #FFFFFF;
    cursor pointer
    padding 4px 6px

 .pagebox
  // background #fff
  height 50px
  display flex
  justify-content center
  align-items center
 .dialog-header-box
  display flex
  justify-content space-between
  // border-bottom 1px solid #E4E7ED;
  padding 12px 16px
  .dialog-header-close
   cursor pointer
   width 26px
   height 26px
   display flex
   justify-content center
   align-items center
  //  background #f2f2f2

 .formbox
   font-size 14px
  .zhaoyaobox
   display flex
   .form_abstract_title
    width 69px
    text-align right
    margin-right 12px
   .form_abstract
    flex 1
    color: #606266;
  .form_keybox
    display flex
    flex-wrap: wrap
    align-items center
    .key_item_set
      font-size 14px
      background: rgba(144,147,153,0.1);
      border-radius: 4px;
      border: 1px solid #909399;
      padding 2px 10px
      color: #909399;
      margin-right 16px
      margin-top 4px
      margin-bottom 4px
      cursor pointer
      height 30px
      line-height 30px
      box-sizing border-box
      display flex
      justify-content center
      align-items center
      &:hover
        border: 1px solid #357DFF;
</style>
